好了，最後一天了，也沒有太多新花樣，
今天就來個組合拳吧！
在LIFF的官方API文檔中有介紹到，關於LIFF v2的使用方法，
LIFF v2有很多可以使用的API，簡單講一下可以做哪些事情，
包括了：
1.取得基本環境資訊(使用的介面等)
2.登入、登出資訊
3.取得使用者資料
4.透過網頁傳訊息
5.開啟連結或跳轉
6.打開QRcode掃描器
還有其他更多功能，
當然這一篇是不會講到這些全部的，
只能簡單示範一下其中幾個API要怎麼使用，
今年第一次參加的鐵人賽就要下台一鞠躬啦~
這邊做一個範例，是user點了LIFF URL之後，
LINE的使用者名稱會跑到網頁上，一個簡單的範例，
但是以此類推基本上都可以比較知道API的調用方法了，
有幾個部分是初學者會需要知道的，
要使用LIFF API，有以下步驟：
1.先建立兩個HTML檔案，一個是收User暱稱的LIFF網頁，一個是呈現User暱稱的網頁，
2.將目標網址建立在urls.py當中，
3.目標網址丟到liffpy當中，產出LIFF ID
4.將LIFF ID寫到HTML檔案當中，用liff.init()進行API初始化設定
5.盡情使用LIFF API吧!!
這邊就不廢話啦，延續前兩篇的內容繼續，
首先建立一個LIFF用的HTML檔案：
#liff_test.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
<title>LIFF測試</title>
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<h1>網頁跳轉中</h1>
</body>
</html>
第二個是呈現畫面用的HTML網頁，
#sayhi.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>LIFF抓User_name測試</title>
</head>
<body>
<h1> {{name}} 完成</h1>
</body>
</html>
這邊先建立了一個在畫面上是網頁跳轉中的HTML檔案，
其中要引入的函數庫包括LIFF v2以及jQuery，
jQuery就是一套跨瀏覽器的JavaScript函式庫，
可簡化HTML與JavaScript之間的操作，
接著下來，將預計建立LIFF使用的網址路徑，
設定至urls.py當中：
#urls.py
urlpatterns = [
path('admin/', admin.site.urls),
url('^callback',views.callback),
url('^notify',views.notify),
url('^ig_command',views.ig_command),
url('^comm',views.comm),
url('^index/(?P<day>\d+)/(?P<post_title>.+)$',views.index),
url('^Weather_Predict',views.Weather_Predict),
#新增liff這個url，這個是用來建例LIFF轉跳頁面用的
url('^liff',views.liff),
#新增sayhi這一個url，並設定(?P<name>.+)，用來獲得user的名字參數並顯示在畫面上
url('^sayhi/(?P<name>.+)',views.sayhi),
]
以將網址丟到liffpy當中，獲得LIFF ID，
#views.py
#若文字訊息中有https://，則自動將其URL建立LIFF
elif 'https://' in mtext:
try:
liff_id = liff_api.add(
view_type="full",
view_url=mtext)
#1607718325-5QmeBQop=google首頁
message.append(TextSendMessage(text='https://liff.line.me/'+liff_id))
line_bot_api.reply_message(event.reply_token,message)
except:
print(err.message)
這樣一來就獲得了LIFF ID，這個例子中是"1607718325-8lN5k6oL"
回過頭來改一下HTML檔案：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
<title>LIFF測試</title>
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
// Using a Promise object
liff.init({
liffId: '1607718325-8lN5k6oL' // Use own liffId
})
.then(() => {
// Start to use liff's api
liff.getProfile()
.then(profile => {
liff.openWindow({
url: "https://這邊改自己的domain/sayhi/"+profile.displayName,
});
liff.closeWindow(); //關閉視窗
})
.catch((err) => {
console.log('error', err);
});
})
.catch((err) => {
// Error happens during initialization
console.log(err.code, err.message);
});
});
</script>
</head>
<body>
<h1>網頁跳轉中</h1>
</body>
</html>
中間加入的Javascript程式碼區段，
其中 $(document).ready(function()是jQuery等待網頁載完之後開始動作的語法，
後面的{}中是網頁載完之後接著做的動作，
liff.init()是LIFF初始化設定的語法，
這邊就要把LIFF ID放入了，
.then(()) => 後面指向如果成功初始化的話，接著執行的程式，
.catch((err)) => 這邊指向出現error時執行的程式
liff.getProfile()是獲得User在LINE上面的公開資訊，
這邊我們的目的是獲取暱稱，即profile.displayName，
接著我們把這個暱稱，組合成sayhi的URL後面的參數，
接著用liff.openWindow()開啟這個URL，
同時用liff.closeWindow()關閉本來的LIFF網頁，
於是就完成了跳轉的作業啦，
成果展示影片：
實際操作：
手機展示：
這樣就完成囉！
完賽感言：
這次好不容易趁著鐵人賽把自己所學整理了一輪，
覺得意外充實阿！
iThome鐵人賽
看影片追技術